<template>
  <div class="myShop">
    <van-nav-bar title="我的商品" left-arrow @click-left="$router.push({path:'person'})">
      <span slot='left' class="topleftIcon"><img src='../../../public/images/qt_75.png'/></span>
    </van-nav-bar>
    <div class="contentNav">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        finished-text="没有更多了"
        :immediate-check="false"
        :offset='50'>
          <van-tabs  animated @click="tabsClick">
            <van-tab title="全部商品" info="5">
              <div class="shopList flex_between flex-wrap" >
                <div :class="{'shop trade':item.status=='1','shop tradeSuccess':item.status=='2','shop':item.status=='0'}" v-for='(item,index) in order' :key='index' @click='jump(item)'>
                  <img :src='item.images' class="shopPic"/>
                  <div class="ml-20 mr-20" style="width:2.9rem;">
                    <div class="name">
                      <p class="hide_other l ">{{item.title}}</p>
                      <div class="publicTags l">{{item.quality}}</div>
                      <div class="clear"></div>
                    </div>
                    <div class="other mb-20">
                      <p>￥{{item.price}}</p>
                      <!-- <p>16人想要</p> -->
                      <div class="clear"></div>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
            <van-tab title="销售中">

            </van-tab>
            <van-tab title="交易中">
              <div slot="title">
                交易中<span class="huizhang">{{numbers}}</span>
              </div>
              <div class="shopList flex_between flex-wrap">
                <div class="shop trade" v-for='(item,index) in order' :key='index' @click='jump(item)'>
                  <img :src='item.images' class="shopPic"/>
                  <div class="ml-20 mr-20" style="width:2.9rem;">
                    <div class="name">
                      <p class="hide_other l ">{{item.title}}</p>
                      <div class="publicTags l">{{item.quality}}</div>
                      <div class="clear"></div>
                    </div>
                    <div class="other mb-20">
                      <p>￥1{{item.price}}</p>
                      <!-- <p>16人想要</p> -->
                      <div class="clear"></div>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
            <van-tab title="已完成">
              <div class="shopList flex_between flex-wrap">
                <div class="shop tradeSuccess" v-for='(item,index) in order' :key='index' @click='jump(item)'>
                  <img :src='item.images' class="shopPic"/>
                  <div class="ml-20 mr-20" style="width:2.9rem;">
                    <div class="name">
                      <p class="hide_other l ">{{item.title}}</p>
                      <div class="publicTags l">{{item.quality}}</div>
                      <div class="clear"></div>
                    </div>
                    <div class="other mb-20">
                      <p>￥1{{item.price}}</p>
                      <!-- <p>16人想要</p> -->
                      <div class="clear"></div>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
          </van-tabs>
        </van-list>
    </div>


  </div>
</template>

<script>
import storage from '@/common/store'
export default {
  data(){
    return{
      active:0,
      loading: false,
      finished: false,
      page:1,
      size:10,
      order:[],
      userId:storage.getItem('userInfo').userId,
      numbers:0,
    }
  },
  created(){
    this.getMessage();
  },
  methods:{
    getMessage(){
      this.$get(this.$api.user.commodities,{size:this.size,page:1,status:this.active,userId:this.userId}).then(data=>{
        let num=0;
        data.data.curPageData.forEach((item,index)=>{
          if(item.status==1){
            num++;
            this.numbers=num;
          };
          data.data.curPageData[index].images=JSON.parse(item.images)[0];
        });
        if(Number(this.page)*this.size>=data.data.totalNum) this.finished  = true;
        this.order=data.data.curPageData;
        this.page=2;
      })
    },
    tabsClick(index,title){
      console.log(index)
      switch(index){
        case 0:
          this.active=0;
          break;
        case 1:
          this.active=3;
          break;
        case 2:
          this.active=1;
          break;
        case 3:
          this.active=2;
          break;
      }
      this.order=[];
      this.getMessage();
    },
    onLoad() {
      setTimeout(() => {
        this.$get(this.$api.user.commodities,{size:this.size,page:this.page,status:this.active,userId:this.userId}).then(data=>{
          console.log((Number(this.page)-1)*this.size,data.data.totalNum)
          if((Number(this.page)-1)*this.size<data.data.totalNum){
          // if((this.page-1)*this.size<data.data.totalNum){
            data.data.curPageData.forEach((item,index)=>{
              data.data.curPageData[index].images=JSON.parse(item.images)[0];
            });
            for (let i = 0; i < data.data.curPageData.length; i++) {
              this.order.push(data.data.curPageData[i]);
            };
            console.log(this.order);
            this.loading = false;
          }else{
            this.loading = false;
            this.finished  = true;
            console.log(this.finished)
          }
          this.page++;
        })
      }, 500);
    },
    jump(item){
      let path;
      switch(item.status){
        case 0:
          path='myShopDetail';
          break;
        case 1:
          path='myShopDetail';
          break;
        case 2:
          path='myShopDetail';
          break;
      };
      // if(item.status==0 && storage.getItem('userInfo').userId)
      this.$router.push({path:path,query:{categoryId:item.commodityId}})
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .myShop{height: 100vh;background-color: #F0F1F4;}
  .shopList{background-color: #F0F1F4;padding: 0.3rem;}
  .shopList .shop{background-color: #fff;border-radius: 0.12rem;margin-bottom: 0.3rem;position: relative;}
  .shopList .trade::before{content: '';width: 0.72rem;height: 0.72rem;position:absolute;left: 0;top: 0;z-index: 10;background: url('../../../public/images/trade.png') no-repeat;background-size: 100% 100%;}
  .shopList .tradeSuccess::before{content: '';width: 0.72rem;height: 0.72rem;position:absolute;left: 0;top: 0;z-index: 10;background: url('../../../public/images/tradeSuccess.png') no-repeat;background-size: 100% 100%;}
  .shopList .shop .shopPic{width: 3.3rem;height: 3.3rem;display: block;}
  .shopList .shop .name{font: 0.26rem/0.3rem '微软雅黑';color: #000;margin: 0.23rem 0;}
  .shopList .shop .name p{display: inline-block;max-width:60%;}
  .shopList .shop .other p:nth-of-type(1){float: left;display: block;font: 0.34rem/0.5rem '微软雅黑';color: #F88222;}
  .shopList .shop .other p:nth-of-type(2){float: right;display: block;font: 0.2rem/0.5rem '微软雅黑';color: #999999;}
  .huizhang{width: 0.30rem;height:0.3rem;border-radius: 50%;background-color: #F43711;text-align: center;font-size: 0.16rem;color: #F5F5F5;position: absolute;right:0.2rem;top:0.2rem;overflow: inherit;line-height: 0.3rem;}
  .contentNav{height:calc(100vh - 46px);overflow-y: scroll;}
</style>
